<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/css/thesame.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/css/footer.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/css/leftSidebar.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/framework/css/rightCon.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/framework/css/page.css}" media="all">
</head>
<script th:inline="javascript">var basePath = [[${#httpServletRequest.getContextPath()}]];</script>
<body class="layui-layout-body">
<div class="layui-body layui-body-pb60px">
    <div class="scroll-box">
        <div class="scroll-box-con">
            <div class="crumbs-nav f14px pb16px">
                <span>角色权限</span>
                <span class="current">新建</span>
            </div>
            <div class="border-radius4 bgWhite">
                <div class="f18px pt16px pb16px ml16px mr16px border-bot1px">新建角色</div>
                <div class="pad16px add-mess form-style">
                    <div class="add-mess-child">
                        <div>
                            <label><em class="red">*</em>角色名称：</label>
                        </div>
                        <p><input type="text" maxlength="10" id="roleName" onkeyup="value=value.replace(/[~!`?\/<>|@#$%^&*()+_=:]/g,'')" placeholder="请输入"></p>
                    </div>
                    <div class="add-mess-child">
                        <div>
                            <label>角色描述：</label>
                        </div>
                        <p class="width"><textarea maxlength="50" id="roleDesc" onkeyup="value=value.replace(/[~!`?\/<>|@#$%^&*()+_=:]/g,'')" cols="5" rows="3"></textarea></p>
                    </div>
                </div>
                <div class="pad16px">
                    <div class="mb16px">功能权限：</div>
                    <div class="module-con" th:each="menu, status : ${menus}" th:style="${status.count} >1 ? 'display:none':''">
                        <nav class="module-bav textCenter border-radius4 border1px mr16px">
                            <p class="bgBlue-rgba fb border-top-radius4">平台版块</p>
                            <ul class="plat">
                                <!--<li class="current">商铺管理</li>
                                <li>数据平台</li>
                                <li>移动端</li>-->
                                <li th:each="app,appstat:${appList}" th:class="${appstat.first}?'current':''" th:attr="data-id=${app.menu_no}" th:text="${app.name}"></li>
                            </ul>
                        </nav>
                        <div class="layui-form layui-form-color border-radius4 border1px">
                            <table border="0" cellspacing="0" cellpadding="0">
                                <thead>
                                <tr class="bgBlue-rgba textCenter">
                                    <th>一级模块</th>
                                    <th>二级模块</th>
                                    <th>操作权限</th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="layui-footer layui-footer-one">
    <div class="btn-con textCenter lh40px">
        <span class="btn-cancel" onclick="returnRoleList()">返&nbsp;回</span>
        <span class="btn-compile" onclick="addRole()">提&nbsp;交</span>
    </div>
</div>
<script th:src="@{/static/js/jquery-3.1.1.min.js}" charset="utf-8"></script>
<script th:src="@{/static/layui/layui.js}" charset="utf-8"></script>
<script type="text/javascript" th:src="@{/static/framework/js/layuiCon.js}" charset="utf-8"></script>
<script>

    //layer初始化
    var layer;
    layui.use('layer', function () {
        layer = layui.layer;
    });

    //权限选择初始化
    var fuwu_no = $('.plat li').eq(0).data("id");
    var yanglao_no = $('.plat li').eq(1).data("id");
    var shuju_no = $('.plat li').eq(2).data("id");
    var fuwu_check = '';
    var yanglao_check = '';
    var shuju_check = '';


    $(function () {
        //新增修改初始化
        cuRoleInit();
        //板块切换
        tabSwitch();
        //选择浏览权限按钮初始化，当浏览按钮勾选时，后面才可以勾选
        checkFirstBtnInit();
    })


    /**
     * 板块切换
     */
    function tabSwitch() {
        $('.module-bav li').click(function () {
            var oldMenuNo =  $('.module-bav li.current').data("id");
            console.log("oldMenuNo ========="+oldMenuNo)
            $(this).addClass('current').siblings().removeClass('current');
            var menuNo = $(this).data("id");
            //板块切换
            tableGrenate(menuNo);
            //设置上个板块勾选操作代码
            setPlatCheck(oldMenuNo);
        })
    }

    /**
     * table query
     */
    function tableGrenate(menuNo) {
        //获取板块勾选操作代码
        var checkarr = getPlatCheck(menuNo);
        console.log("checkarr=" + checkarr);
        $.ajax({
            type: "post",
            url: basePath + "/role/getMenuBackList",
            dataType: "json",
            data: {"menuNo": menuNo},
            success: function (rst) {
                console.log(rst);
                var html = "";
                if (rst.code == 0) {
                    $.each(rst.data, function (i, module) {
                        //总览不显示
                        if (module.menu_no != 99) {
                            $.each(module.funcList, function (j, func) {
                                html += '<tr>';
                                html += (j == 0 ? '<td style="width:126px" rowspan="' + module.funcCount + '">' + module.name + '</td>' : '');
                                html += (module.funcCount == 1 ? '<td style="width:160px"></td>' : '<td style="width:160px">' + func.name + '</td>');
                                html += '<td>';
                                html += '<div>';
                                $.each(func.btnList, function (k, btn) {
                                    var btnName = btn.name;
                                    //var btnName = btn.name=='数据维护'?'数据维护（增|删|改）':btn.name;
                                    if (btn.menu_no == 101) {
                                        html += '<span><input type="checkbox" lay-filter="switchTest" checked="checked" disabled="disabled" name="plat' + menuNo + '" lay-skin="primary" data-id="' + btn.menu_no + '" title="' + btnName + '"></span>';
                                    } else {
                                        if (checkarr.indexOf(btn.menu_no) != -1) {
                                            html += '<span><input type="checkbox" lay-filter="switchTest" checked="checked" name="plat' + menuNo + '" lay-skin="primary" data-id="' + btn.menu_no + '" title="' + btnName + '"></span>';
                                        } else {
                                            html += '<span><input type="checkbox" lay-filter="switchTest" name="plat' + menuNo + '" lay-skin="primary" data-id="' + btn.menu_no + '" title="' + btnName + '"></span>';
                                        }
                                    }

                                })
                                html += '</div>';
                                html += '</td>';
                                html += '</tr>';
                            })
                        }
                    })
                }

                $("tbody").removeAttr("style");
                $("tbody").html(html);
                layui.use(['form'], function () {
                    var form = layui.form;
                    form.render('checkbox');
                });

            }
        })

    }


    /**
     * 新增修改初始化
     */
    function cuRoleInit() {
        var roleNo = '[[${roleNo}]]';
        if (!isNull(roleNo)) {
            $.ajax({
                type: "post",
                url: basePath + "/role/getRoleInfo",
                dataType: "json",
                data: {"roleId": roleNo},
                success: function (rst) {
                    $("#roleNo").val(rst.data.id);
                    $("#roleName").val(rst.data.name);
                    $("#roleDesc").val(rst.data.role_desc);
                    $("#actionTitle").html("修改角色");
                    $("title").html("角色权限修改");
                    fuwu_check = rst.data.fuwuCat;
                    yanglao_check = rst.data.yanglaoCat;
                    shuju_check = rst.data.shujuCat;
                    tableGrenate(fuwu_no);
                }
            })
        } else {
            tableGrenate(fuwu_no);
        }
    }

    /**
     * 添加角色
     */
    function addRole() {
        //设置当前板块勾选操作代码
        var menuNo = $('.module-bav li.current').data("id");
        setPlatCheck(menuNo);
        setPlatCheck(yanglao_no);

        var roleNo = $("#roleNo").val();		//角色编号
        var roleName = $("#roleName").val();	//角色名称
        var roleDesc = $("#roleDesc").val();	//角色描述
        var menuArr = fuwu_check + yanglao_check + shuju_check;	//勾选操作代码
        console.log("menuArr=" + menuArr);

        if (isNull(roleName)) {
            layer.msg("角色名称不能为空！");
            return;
        }
        if (isNull(menuArr)) {
            layer.msg("权限功能尚未配置！");
            return;
        }

        var args = [];
        args.push(roleNo);
        args.push(roleName);
        args.push(roleDesc);
        args.push(menuArr);

        if (isNull(roleNo)) {
            confirmCon("确认要新建角色吗？", addRoleCommit, args);
        } else {
            confirmCon("确认要修改角色吗？", addRoleCommit, args);
        }
    }

    /**
     * 确认后提交
     */
    function addRoleCommit(roleNo, roleName, roleDesc, menuArr) {
        // console.log("roleNo="+roleNo);
        // console.log("roleName="+roleName);
        // console.log("roleDesc="+roleDesc);
        // console.log("meNuArr="+meNuArr);
        $.ajax({
            url: basePath + "/role/save",
            type: "post",
            dataType: "json",
            data: {"roleNo": roleNo, "roleName": roleName, "roleDesc": roleDesc, "menuArr": menuArr},
            beforeSend: function () {
                $("#addBtn").css("pointer-events", "none");
            },
            success: function (data) {
                if (roleNo == null || roleNo == "") {
                    if (data.code == 200) {
                        layer.msg("添加成功", {icon: 1, time: 1500}, function () {
                            window.location.href = "../role/toRolePage";
                        });
                    } else {
                        layer.msg(data.msg, {icon: 2, time: 1500});
                    }
                } else {
                    if (data.code == 200) {
                        layer.msg("修改成功", {icon: 1, time: 1500}, function () {
                            window.location.href = "../role/toRolePage";
                        });
                    } else {
                        layer.msg(data.msg, {icon: 2, time: 1500});
                    }
                }
                $("#addBtn").css("pointer-events", "auto");
            }
        })
    }

    /**
     * 获取板块勾选操作代码
     */
    function getPlatCheck(menuNo) {
        console.log("getPlatCheck=" + menuNo);

        console.log("fuwu_no=" + fuwu_no);
        console.log("yanglao_no=" + yanglao_no);
        console.log("shuju_no=" + shuju_no);

        if (menuNo == fuwu_no) {
            return fuwu_check;
        } else if (menuNo == yanglao_no) {
            return yanglao_check;
        } else if (menuNo == shuju_no) {
            return shuju_check;
        } else {
            return '';
        }
    }

    /**
     * 设置板块勾选操作代码
     */
    function setPlatCheck(menuNo) {
        console.log("menuNo ============"+menuNo)
        var checkarr = "";
        $('[name=plat' + menuNo + ']:checkbox:checked').each(function () {
            checkarr += $(this).data("id") + "|";
            console.log("setPlatCheck====" + checkarr);
        });

        if (menuNo == fuwu_no) {
            fuwu_check = checkarr;
        } else if (menuNo == yanglao_no) {
            if (checkarr.length > 0) {
                yanglao_check = "101|" + checkarr;
            } else {
                yanglao_check = checkarr;
            }
        } else if (menuNo == shuju_no) {
            shuju_check = checkarr;
        }
    }


    /**
     * 判断是否
     */
    function isNull(value) {
        return value == null || value === "" || value === undefined;
    }


    /**
     * 返回列表
     */
    function returnRoleList() {
        window.location.href = basePath + "/role/toRolePage";
    }

    /**
     * 选择浏览权限按钮初始化，当浏览按钮勾选时，后面才可以勾选
     */
    function checkFirstBtnInit() {
        layui.use(['form', 'jquery'], function () {
            $ = layui.jquery;
            form = layui.form;
            //监听多选框点击事件
            form.on('checkbox(switchTest)', function (data) {
                var first = $(this).parent().parent().find("input").first();

                console.log(first)
                var first_status = $(first).prop("checked");
                var select_status = $(this).prop("checked");
                if (first_status == false) {
                    $(this).parent().parent().find("input").each(function () {
                        // $(this).removeAttr("checked");
                        $(this).prop("checked", "");
                    });
                }

                form.render('checkbox');


            });
        })
    }

</script>
</body>

</html>
